import React, { useState } from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

const Com = () => {
  const [ editorState, setEditorState ] = useState(BraftEditor.createEditorState(null))
  const [ outputHTML, setOutputHTML ] = useState('')

  const handleEditorChange = (editorState) => {
    setEditorState(editorState)
    setOutputHTML(editorState.toHTML())
  }

  return (
    <div>
      富文本编辑器
      <BraftEditor
        value={ editorState }
        onChange={ handleEditorChange }
      />
      渲染数据：
      { outputHTML }
      预览效果
      <div dangerouslySetInnerHTML = {{ __html: outputHTML }}></div>
    </div>
)
}

export default Com
 